import React, { Component } from 'react';
import '../../style/AllgoodsScss/tabber.scss'
class Tabber extends Component {
    state = {
        //保存点击的下标
        currentIndex: 0,
        list: [
            { name: '首页' },
            { name: '分类' },
            { name: '全部商品' },
            { name: '购物车' },
            { name: '个人中心' },
        ]
    }
    handleClick(index) {
        //点击时用setState更改currentIndex的状态
        this.setState({ currentIndex: index })
    }
    render() {
        return (
            <div className="tabber">
                {
                    this.state.list.map((item, index) => {
                        return (
                            <div className={'bar ' + (this.state.currentIndex === index ? 'active' : '')} key={index} onClick={() => { this.handleClick(index) }}>
                                {item.name}
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

export default Tabber;
